<template>
    <div class="loading">
        <img width="26" height="26" src="static/img/335.png" alt="loading" v-show="showimg" class="loading-img">
        <p class="desc">{{desc}}</p>
    </div>
</template>
<script type="text/ecmascript-6">
    export default {
    	props: {
			desc: {
    			type: String,
                default: '正在载入...'
            },
			showimg: {
				type: Boolean,
				default: true
            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    .loading{
        width: 100%;
        text-align: center;
        .loading-img{
            -webkit-animation: rotate-animate 2s linear infinite;
            animation: rotate-animate 2s linear infinite;
        }
        .desc{
            line-height: 24px;
            font-size: 14px;
            color: #666;
        }
    }
    @-webkit-keyframes rotate-animate{
        0%{-webkit-transform:rotate(0deg);}
        100%{-webkit-transform:rotate(360deg);}
    }
    @keyframes rotate-animate{
        0%{transform:rotate(0deg);}
        100%{transform:rotate(360deg);}
    }
</style>
